<template>
  <div class="out">
    <el-menu
      default-active="/manage/problems"
      class="m-manage-left"
      router
    >
      <el-menu-item index="/manage/problems">
        <span>📔&nbsp;&nbsp;题库管理</span>
      </el-menu-item>
      <el-menu-item index="/manage/solutions">
        <span>🙋&nbsp;&nbsp;题解管理</span>
      </el-menu-item>
      <el-menu-item v-if="userInfo.role === 3" index="/manage/users">
        <span>👨🏻&nbsp;&nbsp;用户管理</span>
      </el-menu-item>
      <el-menu-item index="/manage/asks">
        <span>❓&nbsp;&nbsp;问答管理</span>
      </el-menu-item>
    </el-menu>
    <div class="right">
      <router-view/>
    </div>
  </div>

</template>

<script>
export default {
  name: "Manage",
  computed: {
    isLoggedIn() {
      return this.$store.state.isLogin;　　//需要监听的数据
    },
    userInfo() {
      return this.$store.state.userInfo??{};
    }
  },
  watch: {
    isLoggedIn(newVal, oldVal) {
      if (!newVal) {
        this.$goRoute('/login')
      }
    }
  },
  mounted() {
    if (!this.isLoggedIn){
      this.$error("请先登录！")
      this.$goRoute('/login')
    }
  }
}
</script>

<style scoped>
.m-manage-left{
  width: 200px;
  height: 100%;
}
.out{
  width: 100%;
  margin: 0 auto;
  height: 100%;
  display: flex;
}
.right {
  width: calc(100% - 200px);
}
</style>
